<template>
  <div class="text-box">
    <div class="tb-a">
      <p v-for="i in 2" :key="i">text </p>
    </div>
    <div class="tb-b">
      <p v-for="(v,i) in text" :key="i" :data-text="v">
        <span v-for="(vv, ii) in v" :key="ii" :data-text="vv"
          :style="{transitionDelay: ii/20+'s'}">{{vv}}</span>
      </p>
    </div>
    <div class="tb-c">
      <p class="glowIn">
        <span v-for="(v, i) in article" :key="i"
          :style="{transitionDelay: i/20+'s'}">{{v}}</span>
      </p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'textBox',
  data () {
    return {
      text: [
        'text',
        'split',
        'array'
      ],
      article: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Suspendisse ultrices gravida dictum fusce ut placerat orci nulla. A lacus vestibulum sed arcu."
    }
  },
  computed: {

  },
  methods: {

  },
}
</script>
 
<style scoped lang="scss">
.text-box {
  

  .tb-a {
    // display: flex;
    // flex-direction: column;
    // align-items: start;
    list-style-type: none;
    padding: 6px 0;

    p {
      --fill-color: #198CE6;
      position: relative;
      display: block;
      padding: 4px 0;
      font-family: Raleway, sans-serif;
      font-size: 3em;
      font-weight: 700;
      text-decoration: none;
      text-transform: uppercase;
      -webkit-text-stroke: 2px var(--fill-color);
      background: linear-gradient(90deg, var(--fill-color) 0%, var(--fill-color) 100%);
      background-size: 0;
      background-position: left;
      background-repeat: no-repeat;
      color: transparent;
      background-clip: text;
      transition: 0.5s linear;

      &:hover {
        background-size: 100%;
      }
    }
  }

  .tb-b {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    background: #999;
    p {
      display: flex;
      padding: 6px;
      font-family: Lato, sans-serif;
      text-decoration: none;
      overflow: hidden;
      color: #198CE6;
      font-size: 20px;
      span {
        position: relative;
        transition: 0.3s;
        // color: #198CE6;
        &::before {
          position: absolute;
          content: attr(data-text);
          transform: translateY(130%);
        }
      }

      &:hover {
        // color: #198CE6;
        span {
          transform: translateY(-130%);
        }
      }
    }
  }

  .tb-c{
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(
        rgba(16, 16, 16, 0.8),
        rgba(16, 16, 16, 0.8)
      ),
      url(https://i.loli.net/2019/11/03/RtVq2wxQYySDb8L.jpg);
    background-size: cover;
    p {
      margin: 0em 5em 4em 5em;
    }

    h1, p {
      text-align: left;
      line-height: 1.8;
      font-family: Lora, serif;
    }

    .glowIn {
      color: white;

      span {
        animation: glow-in 0.8s both;
      }
    }

    @keyframes glow-in {
      from {
        opacity: 0;
      }
      65% {
        opacity: 1;
        text-shadow: 0 0 25px white;
      }
      75% {
        opacity: 1;
      }
      to {
        opacity: 0.7;
      }
    }

  }
}
</style>